<template>
  <div class="goods-container">
    <van-nav-bar
      class="page-nav-bar"
      title="商品页面"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <!-- 筛选区域 -->
    <van-dropdown-menu v-if="goodList.length" class="fixed-filter">
      <van-dropdown-item v-model="query.sort" :options="option" @change="filterGetList" />
    </van-dropdown-menu>

    <!-- 列表内容 -->
    <van-empty v-if="goodList.length===0 && !error && !loading" description="暂无商品数据信息" />
    <van-list v-model="loading"  @load="initData" :finished-text="goodList.length===0 ?'':'我也是有底线的'" :finished="finished" :error.sync="error">
      <GoodList :list="goodList" />
    </van-list>
  </div>
</template>
<script>
import { getProductSearch } from "@/api/goods";
import GoodList from '@/components/good-list'
export default {
  name: "good",
  components: {
    GoodList,
  },
  data() {
    return {
      query:{
        brandId:'',  // 品牌id
        keyword:'',  // 关键字
        pageNum:1,   // 页码
        pageSize:10, // 每页数量
        productCategoryId:'', // 分类id
        sort:0   // 排序字段:0->按相关度；1->按新品；2->按销量；3->价格从低到高；4->价格从高到低,可用值:0,1,2,3,4
      },
      goodList: [],
      loading:false,
      finished:false,
      error:false,
      total:'', // 总数
      option: [
        { text: '默认排序', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '热销商品', value: 2 },
        { text: '价格升序', value: 3 },
        { text: '价格降序', value: 4 },
      ]
    };
  },
  created() {
    Object.keys(this.$route.query).forEach(key=>{
      this.query[key] = this.$route.query[key]
    })
  },
  methods: {
    // 获取列表数据
    async initData() {
      try {
        const { list,total } = await getProductSearch(this.query);
        this.goodList.push(...list)
        this.total = total
        if(this.goodList.length === total) this.finished = true
      } catch (error) {
        console.log(error);
      }
      this.loading = false
    },
    // 筛选重新拉取列表
    filterGetList(){
      this.goodList = []
      this.initData()
    }
  },
};
</script>
<style lang="less" scoped>
.goods-container{
  padding-top: 184px;
  z-index: 1999;
}
.fixed-filter{
  position: fixed;
  top: 92px;
  z-index:1000;
  width: 100%;
}
</style>